<template>
	<view class="homeLayout">
		<custom-nav-bar listStyle="background:#fff;" title="申报"></custom-nav-bar>
			<view class='classify'>
				
				<view class="select">
					
					 <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"   activeColor="#1ec0ff" class='right'></uni-segmented-control>
						
			
				</view>
				<view class="content">
				            <view v-show="current === 0">
				                这是{{items[current]}}的内容
				            </view>
				            <view v-show="current === 1">
				               这是{{items[current]}}的内容
				            </view>
				            <view v-show="current === 2">
				                这是{{items[current]}}的内容
				            </view>
							<view v-show="current === 3">
							    这是{{items[current]}}的内容
							</view>
				</view>
			
			</view>	
				
	</view>
</template>

<script setup>
	
import { computed, ref } from "vue";
import {apiGetClassfy,apiGetCategory,apiGetShopData} from "../../api/apis";
import {onLoad,onShow} from "@dcloudio/uni-app";
import {toFixed} from "../../utils/common.js";


const current = ref(0);
const items = ref(['身份认证','成果申报','申报管理','申报统计']);


	onLoad(async(e)=>{
		
		
	});
	
	onShow(async(e)=>{
		//判断有没有权限进这个页面
		let userInfo =uni.getStorageSync('userInfo');
		if(userInfo){
			
			//请求接口获取数据
			let lv = userInfo.lv;
			if(lv<1){
				
				uni.showModal({
					title:'你没有权限',
					showCancel:false,
					complete:()=>{
						
						uni.switchTab({
							url:"/pages/user/user"
						})
					}
				})
				
				
				
			}
			
		}else{
			//去登录
			uni.navigateTo({
				url:"/pages/user/login"
			})
		}
		
		
	})
	
	
	
	const onClickItem = (e) =>{
		
		if (current.value != e.currentIndex) {
		        current.value = e.currentIndex;
		      }
	}
	
	// 选择菜单
	const changeMenu = async(index,shopid) =>{
		setListIndex.value = index;
		menuTitle.value = menuList.value[index].title;
		//查询商品
		let {id,token} = uni.getStorageSync('userInfo');
		let data={
			id,
			token,
			shopid,
			page:1,
			rows:10
		}
		
		let res = await apiGetShopData(data);
		shopData.value = res.data;
		
	}
	
	const clickYh = ()=>{
		shopShow.value=false;
		isYh.value = true;
		yhPopup.value.open();
	}
	
	
	
	//scanCode 扫码
	const scanCode = () => {
		//店名
		let shopName = "xinxin";
		uni.scanCode({
				success: function (res) {
					
					//判断扫码内容
					let codeShopName = res.result.split('-')[0];
					if(codeShopName == shopName){
						
						let index = res.result.indexOf("-");
						let tableNumber = res.result.slice(index+1);
						tableNo.value = tableNumber;
					}else{
						
						uni.showModal({
							content:"二维码有误,请扫正确的二维码",
							icon:"none"
						})
					}
				},
				fail:function(err){
					
					console.log(err);
				}
		})
	}
	
	
	
	
</script>

<style lang='scss' scoped>
	.homeLayout{
		padding-top:40rpx;
		.popheader{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				color:green;
				font-size: 28rpx;
			}
			.close{
				padding: 4rpx;
			}
		}
		.safe-area-shop{
			/* #ifdef H5 */
				height: 15vh;
			/* #endif */
			/* #ifndef H5 */
				height: 10vh;
			/* #endif */
		}
		.classify{
				 
				 padding: 0 30rpx;
				 
				 
				 
				 .select{
					
					 width:100%;
					 height: 75rpx;
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
					 .right{
						 width:690rpx;
						 height:70rpx;
						 font-size: 24rpx;
						 
					 }
					 .left{
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
						 width: 530rpx;
						 height: 70rpx;
						 border-radius: 5rpx;
						 border: 1px solid $xx-color-body;
						 color: #999;
						 padding: 0 20rpx;
						 font-size: 28rpx;
						 line-height: 70rpx;
					 }
				 }
				 
				 .notice{
					 width: 690rpx;
					 height: 140rpx;
					 margin: 20rpx 0;
					 image{
						 width: 100%;
						 height: 100%;
						 border-radius: 15rpx;
					 }
				 }
				 
				 .content{
					 display: flex;
					 justify-content: space-between;
					
					 .left{
						
						 
						 .list{
							 width: 180rpx;
							 height: 100rpx;
							 background: #eee;
							 font-size: 24rpx;
							 text-align: center;
							 line-height: 100rpx;
							 color: #999;
						 }
						 
						 .active{
							 background: #fff;
							 color: $xx-color-body;
						 }
						 
					 }
					 
					 .right{
						 height: 50vh;
						 .selectMenu{
							 color: #999;
							 font-size: 24rpx;
							 padding-left: 10rpx;
							 padding-top:10rpx;
						 }
						 
						 .box{
							 display: flex;
							 justify-content: space-between;
							 height:250rpx;
							 width:510rpx;
							 padding: 20rpx 0;
							 padding-left:10rpx;
							 .left{
									
									width: 200rpx;
									height: 200rpx;
									image{
										width: 100%;
										height: 100%;
										border-radius: 10rpx;
									}
							 }
							 .right{
								 padding-left:10rpx;
							 	 width: 310rpx;
								 height:250rpx;
								 .title{
									 font-size: 32rpx;
									 font-weight: 600;
								 }
								 .label{
									 font-size: 24rpx;
								 }
								 .text{
									 font-size: 26rpx;
								 }
								 .priceVip{
									 font-size: 26rpx;
								 }
								 .price{
									 font-size: 26rpx;
								 }
								 .but{
									 display: flex;
									 justify-content: space-between;
									 .left{
										 width: 180rpx;
										 height: 20rpx;
									 }
									 .butImg{
										 margin-right:30rpx;
										 width:50rpx;
										 height: 50rpx;
										 image{
											 width:100%;
											 height: 100%;
										 }
									 }
									
								 }
							 }
						 }
						 
					 }
				 }
				 
				 .shop{
				 					 width: 690rpx;
				 					 height: 100rpx;
				 					 backdrop-filter:blur(10rpx);
				 					 border-radius: 50rpx;
				 					 overflow: hidden;
				 					 display: flex;
				 					 flex-wrap: wrap;
				 					 color:#fff;
				 					 line-height: 100rpx;
				 					 text-align: center;
				 					 position: fixed;
									 /* #ifdef H5 */
									  bottom:10vh;
									 /* #endif */
									 /* #ifndef H5 */
									  bottom:4vh;
									 /* #endif */
									 z-index:100;
				 					
				 					 .left{
				 						 width:28%;
				 						 background: $xx-color-body;
										 transition-property:width;
										 transition-duration: 0.8s;
										 transition-timing-function: inherit;
				 						 
				 					 }
									 button::after{ border: none;}
				 					 .centent{
				 						 margin-left: 2%;
				 						 width:50%;
				 						 background: #BA4A00;
										 border-radius: 0;
										 border:none;
										 color:#fff;
										 line-height: 100rpx;
										 display: flex;
										 
										 .img{
											 width:70rpx;
											 height:100%;
											 margin-right: 15rpx;
											
											 image{
												padding-top: 15rpx;
												width:70rpx;
												height:70rpx;
											 }
										 }
										 
										
									 }
				 					 .right{
				 						 width:20%;
				 						 background: $xx-color-body;
										 
				 					 }
				 }
				 .active{
					 .left{
						 width:0%;
					 }
					 .centent{
						 margin-left: 0%;
						 width: 80%;
						 transition-property:width;
						 transition-duration: 0.8s;
						 transition-timing-function: inherit;
					 }
				 }
				 
			
		}
		
		.yhPopup{
			position: relative;
			background:#fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			width:100vw;
			
			scroll-view{
				max-height: 60vh;
			}
			
			.content{
				.row{
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 1.7em;
					font-size: 32rpx;
					.left{
						color:red;
						width:140rpx;
						text-align: right;
						padding-right:5rpx;
					}
					.right{
						flex: 1;
						width:0;
						word-wrap: break-word;
						padding-left:5rpx;
					}
				}
			}
		}
		
		.shopPopup{
			position: relative;
			background:#fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			width:100vw;
			
			scroll-view{
				max-height: 60vh;
			}
			
			.content{
				
				.row{
					display: grid;
					gap:5rpx;
					grid-template-columns: repeat(3,1fr);
					align-items: center;
					font-size: 32rpx;
					padding: 10rpx 0;
					line-height: 1.5em;
					.img{
						width: 150rpx;
						height: 150rpx;
						image{
							width:100%;
							height:100%;
							border-radius: 10rpx;
						}
					}
					.left{
						width:360rpx;
						height:150rpx;
						
						.title{
							font-size: 30rpx;
							font-weight: 600;
						}
						.text{
							font-size: 22rpx;
						}
						.price{
							font-size: 38rpx;
							color: #ff0000;
						}
						
						
					}
					.right{
						width:140rpx;
						
						.shang{
							height: 100rpx;
						}
						.xia{
							height: 50rpx;
							display: grid;
							gap:5rpx;
							grid-template-columns: repeat(3,1fr);
							
							.add{
								width: 50rpx;
								height: 50rpx;
								image{
									width:100%;
									height:100%;
								}
							}
							.del{
								width: 50rpx;
								height: 50rpx;
								image{
									width:100%;
									height:100%;
								}
							}
						}
					}
				}
			}
		}
		
		
		.picPopup{
			z-index: 200;
			.right{
				width: 50rpx;
				height: 50rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		
	
	}
	

	 
</style>
